<template>
	<div class="view-contain">
		<headers @back-click="back()" v-bind:headers="headers"></headers>
		<scroll @pullingDown="pullDownRefresh" @pullingUp="pullUpLoad" ref="person" style="margin-top:-1px">
			<div class="content">
				<div class="logo">
					<div class="img"></div>
				</div>
				<div class="find-form">
		            <div class="codeLogin">
		                <div class="tel">
		                    <input class="telInput" type="tel" placeholder="请输入您的手机号" v-model="user.phone">
		                </div>
		                <div class="code-row">
		                    <div class="code">
		                        <input class="codeInput" type="text" placeholder="请输入手机验证码" v-model="user.code">
		                    </div>
		                    <button class="codeBtn" @click="getCode()">
		                        <span v-if='times!=60'>{{times}}</span><span>{{content}}</span>
		                    </button>
		                </div>
		            </div>
		            <div class="pwd">
		                <input class="telInput" placeholder="请输入6-16位字母/数字" v-model="user.password" :type="inputType">
		                <div class="eye" :class="{'active': inputType=='text'}" @click="showPwd()">
		                </div>
		            </div>
		        </div>
		        <div class="confirm">
		            <button class="btn" @click="confirm()" :class="{'active': verify.telCheck(user.phone)&&!verify.isNull(user.code)&&!verify.isNull(user.password)}">立即提交</button>
		        </div>
	        </div>
	    </scroll>
	</div>
</template>
<style lang="less" scoped>
	.view-contain {
		position:absolute;
		width:100%;
		height:100%;
		left:0;
		top:0;
		background:#fff;
		.content {
			position: relative;
			top: 44px;
			left: 0;
			& .logo {
				padding: 56px 0 48px;
				& .img {
					background: url("../../assets/img/comm/logo.png") no-repeat;
					background-size: 100% 100%;
					width: 88px;
					height: 88px;
					margin: 0 auto;
				}
			}
			& .find-form {
				width: 303px;
				margin: 0 auto;
				& .codeLogin {
					width: 100%;

				}
				& .pwdLogin {
					width: 100%;
				}
				& .tel {
					position: relative;
				    padding-left: 43px;
				    border: 1px solid #DADADA;
				    border-radius: 5px;
				    overflow: hidden;
				    &:before {
				    	position: absolute;
					    content: '';
					    width: 24px;
					    height: 24px;
					    top: 6px;
					    left: 10px;
					    background: url("../../assets/img/comm/login-icons.png") no-repeat;
					    background-position: -97px -52px;
				    }
				}
				& input {
					box-sizing: border-box;
					width: 100%;
				    padding: 6px 0;
				    height: 38px;
				    line-height: 16px;
				    border: none;
				}
				& .code {
					position: relative;
				    padding-left: 43px;
				    border: 1px solid #DADADA;
				    border-radius: 5px;
				    overflow: hidden;
				    float: left;
				    margin-left: 0;
				    width: 183px;
				    box-sizing: border-box;
				    &:before {
			    	    position: absolute;
					    content: '';
					    width: 24px;
					    height: 24px;
					    top: 6px;
					    left: 10px;
					    background: url("../../assets/img/comm/login-icons.png") no-repeat;
					    background-position: -9px -7px;
				    }
				}
				& .code-row {
				    margin-top: 17px;
				    overflow: hidden;
				}
				& .codeBtn {
				    float: right;
				    margin-right: 0;
				    width: 104px;
				    border-radius: 5px;
				    line-height: 38px;
				    color: #fff;
				    border: none;
				    background-color: #4C5B72;
				    text-align: center;
				}
				& .pwd {
					position: relative;
				    padding-left: 43px;
				    border: 1px solid #DADADA;
				    border-radius: 5px;
				    overflow: hidden;
				    margin-top: 17px;
	    			padding-right: 43px;
	    			&:before {
	    				position: absolute;
					    content: '';
					    width: 24px;
					    height: 24px;
					    top: 6px;
					    left: 10px;
					    background: url('../../assets/img/comm/login-icons.png') no-repeat;
					    background-position: -53px -52px;
	    			}
	    			& .eye {
						left: auto;
					    right: 10px;
				    	position: absolute;
					    content: '';
					    width: 24px;
					    height: 24px;
					    top: 6px;
					    background: url("../../assets/img/comm/login-icons.png") no-repeat;
					    background-position: -9px -52px;
					    &.active {
						    background-position: -53px -96px;
						}
	    			}
				}
			}
			& .confirm {
				position: relative;
			    width: 303px;
			    margin: 0 auto;
			    overflow: hidden;
			}
			& .btn {
			    margin-top: 36px;
			    width: 100%;
			    border-radius: 5px;
			    height: 39px;
			    line-height: 39px;
			    background-color: #e0e0e0;
			    font-size: 16px;
			    color: #fff;
			    border: none;
			    text-align: center;
			    &.active {
				    background-color: #4C5B72;
				}
			}
			& .href {
			    margin-top: 20px;
			    font-size: 12px;
			    color: #999;
			    overflow: hidden;
			    text-align: left;
			}
		}
	}

</style>
<script>
	import verify from "@/utils/verify.js";
	import apiService from "@/api/homepage.js";
	import crypto from 'crypto';
	import Toast from '@/components/toast.js';
	export default {
		components: {
        },
        data() {
        	return {
	        	headers:{
	                title:'找回密码',
	                skip:'',
	            },
	            user: {
	            	phone: "",
	            	code: "",
	            	password: ""
	            },
            	times: 60,
            	content: "获取验证码",
            	verify: verify,
            	inputType: "password"
	        }
        },
        methods: {
            back(){
                this.$router.go(-1)
            },
            confirm() {
            	if (verify.isNull(this.user.phone)||verify.isNull(this.user.code)||verify.isNull(this.user.password)) {
            		Toast("请输入手机号/验证码/新密码");
	                return false;
	            }
	            if (this.user.password.trim().length < 6||this.user.password.trim().length > 16) {
            		Toast("请输入6-16位数字/字母的密码");
	                return false;
	            }
	            var _this = this;
            	var md5=crypto.createHash('md5');
        		md5.update(this.user.password);
        		var pw = md5.digest('hex');
        		var params = {
					"phone": this.user.phone,
					"password": pw,
					"code": this.user.code
				}
				apiService.getForgetPwd(params).then(resp => {
					if (resp.code == 200) {
            			Toast("密码重置成功，请重新登录");
	                    _this.$router.push({path:'/login'});
	                } else {
            			Toast(resp.message);
	                }
				})
            },
            getCode() {
            	const _this = this;
            	if (_this.user.phone == '') {
            		Toast("请输入您的手机号码");
                	return false;
            	} else if (verify.telCheck(_this.user.phone)) {
	            	apiService.getCode(_this.user.phone).then(resp => {
	            		if(resp.code==200){
            				Toast("验证码已发送");
	                        //倒计时
	                        let interval=setInterval(function () {
	                            _this.times--;
	                            _this.content = "秒";
	                            _this.flag = false;
	                            if (_this.times <= 0) {
	                                _this.content = "获取验证码"
	                                _this.flag = "true";
	                                _this.times = 60;
	                                clearInterval(interval);
	                            }
	                        }, 1000);
	                    }else{
            				Toast(resp.message);
	                    }
	            	})
            	} else {
            		Toast("请输入正确的手机号码");
            	}
        	},
        	showPwd() {
        		if(this.inputType=='password'){
	                this.inputType = 'text';
	            }else{
	                this.inputType='password';
	            }
        	},
        	pullDownRefresh() {
            	this.$refs.person.forceUpdate();
            	return;
            },
            pullUpLoad(){
            	this.$refs.person.forceUpdate();
            	return;
            }
        },
	}
</script>